<template>
    <div class="num-range-component">
        <el-dialog
            title="数值区间过滤组件"
            :visible.sync="dialogOpen"
            @close="close">
            <div class="filter-content">
                    <el-container>
                        <el-aside class="areaDiv" style="width: 200px">
                            <com-part ref="comPart"
                                      @SelectionChange="showSelect" @SelectionPanel="getSelectPanel"
                                      :boardId="boardId" :status="status"
                                      :table-id="tableId"
                                      :selected-data="selectedColData"
                                      :selected-radio="selectedRadio" type-id="3"></com-part>
                        </el-aside>
                        <el-main>
                            <div class="common-border">
                                <div style="display: flex;flex-direction: row;">
                                    <div class="font1">字段</div>
                                    <div style="height: 70px;margin-left: 30px">
                                        <el-scrollbar>
                                            <div style="height: 40px;display: flex;flex-direction: row;flex-wrap: wrap">
                                                <div style="margin: 5px;"
                                                     v-for="tag in colNameIn"
                                                     :key="tag.columnName"
                                                     :type="tag.type">
                                                    {{tag.comment||tag.columnName}}
                                                </div>
                                            </div>
                                        </el-scrollbar>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top: 20px">
                                <div>
                                    <p>组件示例:</p>
                                    <!--引用组件-->
                                    <num-interval-component ref="numInterval"
                                                            @getNumValue="getNumValue" :num-interval-value="numValue"
                                                            numStatus="1"></num-interval-component>
                                </div>

                            </div>
                        </el-main>
                    </el-container>
            </div>
            <div class="footer1">
                <el-button @click="close" size="mini">取消</el-button>
                <el-button @click="confirm" size="mini">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>确认修改信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="ConfirmModification">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import ajax from '@api/ajax'
    import {
        SAVE_FILTER_INFO, GET_FILTER_INFO
    } from '@api/url'
    import comPart from './CommonPartComponent'
    import NumIntervalComponent from '../../../../components/fliterComponent/NumIntervalComponent'

    export default {
        components: {
            NumIntervalComponent,
            comPart
        },
        data () {
            return {
                form: {},
                dialogOpen: false,
                colNameIn: [], // 获取到的选择的字段，显示出来
                panel: {}, // 获取到的选择的组件数据
                tableId: '',
                selectedColData: [], // 编辑状态从后端获取新增时选择的字段数据
                dialogVisible: false, // 编辑状态的弹框标识
                unitId: '', // 编辑状态获取的组件id
                selectedRadio: '', // 编辑状态从后端获取新增时选择的组件值
                numValue: null, // 数值区间的值，新增时默认传null
                // 数值区间输入的最小值和最大值
                numInterval: {
                    minValue: '',
                    maxValue: ''
                },
                status: 'add', // 默认状态为添加
                boardId: ''
            }
        },
        watch: {},
        methods: {
            // 编辑组件时调用的方法
            editPanel (data) {
                this.status = data.status
                this.unitId = data.unitId
                this.boardId = data.boardId
                let obj = {}
                // 根据unitId获取组件信息
                ajax.post(GET_FILTER_INFO, {unitId: this.unitId}).then(res => {
                    obj = res.data
                    if (Object.keys(obj).length !== 0) {
                        // 当组件信息不为空，调用openView方法
                        this.openView(obj)
                    }
                }).catch(err => {
                    console.error('查询错误！', err)
                })
            },
            // 其他页面调用时获取数据
            openView (data) {
                this.dialogOpen = true
                // 判断是新增还有编辑状态
                if (this.status === 'add') {
                    this.boardId = data
                }
                if (this.status === 'edit') {
                    this.form = JSON.parse(data.value)
                    this.tableId = this.form.tableId
                    this.selectedColData = this.form.column
                    this.numValue = data
                    this.unitId = data.unitId
                    this.selectedRadio = this.form.tableId
                    this.$nextTick(() => {
                        this.$refs.numInterval.setInputValue(this.numValue)
                    })
                }

                // 调用comPart组件的初始方法
                this.$nextTick(() => {
                    this.$refs.comPart.init()
                })
            },
            // 获取选择的字段
            showSelect (row) {
                this.colNameIn = row
            },
            // 获取选择的组件
            getSelectPanel (data) {
                this.panel = data
            },
            // 获取输入的最小值和最大值
            getNumValue (data) {
                this.numInterval = data
            },
            // 确认按钮调用的方法
            confirm () {
                // 如果是新增,直接调用后端接口
                if (this.status === 'add') {
                    this.save('A',() => {
                        this.$message.success('保存成功')
                        this.dialogOpen = false
                        this.$emit('getFilterFlag')
                        this.close()
                    })
                }else if (this.status === 'edit') {
                    // 如果是编辑，弹出确认弹框
                    this.dialogVisible = true
                }
            },
            // 编辑状态下的点击确认按钮调用的方法
            ConfirmModification () {
                this.save('U',() => {
                    this.$message.success('保存成功')
                    this.dialogVisible = false
                    this.dialogOpen = false
                    this.$emit('getFilterFlag')
                    this.close()
                })
            },
            save(optMode = 'A',callBack){
                // 判断是否选择了组件
                if (JSON.stringify(this.panel) === '{}') {
                    this.$message.warning('请选择组件')
                    return
                }
                // 判断是否选择了字段
                if (this.colNameIn.length === 0) {
                    this.$message.warning('请选择字段')
                    return
                }
                const conditions = {
                    value : {
                        type:'2',
                        tableId:this.panel.tableId,
                        minValue:'',
                        maxValue:'',
                        column:this.colNameIn.map(item => item.columnName)
                    },
                    optMode : optMode,
                    unitType : '2',
                    length : '200',
                    width: '400',
                    haxis: '0',
                    vaxis: '0',
                    modelId : this.panel.modelId,
                    ctlUnit : this.panel.unitId,
                    seqNO : '1',
                    unitCom : 'NumIntervalComponent',
                    unitName : 'NumIntervalComponent',
                    boardId : this.boardId
                }
                ajax.post(SAVE_FILTER_INFO, conditions).then(res => {
                    callBack && callBack()
                })
            },
            // 页面关闭时数据重置
            close () {
                this.dialogOpen = false
                this.dialogVisible = false
                Object.assign(this.$data, this.$options.data())
                this.$refs.comPart.close()
                this.$refs.numInterval.clearInput()
            }
        },
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .num-range-component
        .filter-content
            margin 0 auto
            width 90%
            height 80%
            border 1px solid #D8DCE5
            .common-border
                border: 1px solid #D8DCE5
            .el-aside
                border-right 1px solid #D8DCE5
            .el-main
                margin-left 2px
                margin-top 2px
                .font1
                    border-right 1px solid #D8DCE5
                    line-height 100px
                    width 40px
        .footer1
            text-align right
            padding-right 45px
            padding-top 20px
</style>
